<!-- Button trigger modal -->
<button type="button" id="showExportDialog"  style="display:none"  data-toggle="modal" data-target="#DataExportModal">
</button>
<!-- Modal -->
<div class="modal fade" id="DataExportModal" tabindex="-1" role="dialog" aria-labelledby="DataExportModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="DataExportModalLabel">{{title}}</h4>
      </div>
      <div class="modal-body">

        <div class="form-group form-inline" *ngIf="!notShp">
            <div class="input-group">
              <span class="input-group-addon" >Format*</span> 
                <div class="input-group-btn" >
                    <input type="text" readonly class="form-control dropdown-toggle" data-toggle="dropdown"   [value]="CurrentDataFormat?CurrentDataFormat.name:''" placeholder="No data format.">
                    <button id="dropdownBtn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="caret"></span></button>
                    <ul class="dropdown-menu dropdown-menu-right">
                      <li class="list-item-for-selection" *ngFor="let dataFormat of dataFormats" (click)="onDataFormatItemSelected(dataFormat)"  >{{dataFormat.name}}</li>
                    </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div>
        <div class="form-group form-inline" *ngIf="!notShp">
            <div class="input-group">
              <span class="input-group-addon" >Export*</span> 
                <div class="input-group-btn" >
                    <input type="text" readonly class="form-control dropdown-toggle" data-toggle="dropdown"   [value]="CurrentExportFeature?CurrentExportFeature.name:''" placeholder="No export feature.">
                    <button id="dropdownBtn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="caret"></span></button>
                    <ul class="dropdown-menu dropdown-menu-right">
                      <li class="list-item-for-selection" *ngFor="let  exportFeature of exportFeatures" (click)="onExportFeatureSelected(exportFeature)"  >{{exportFeature.name}}</li>
                    </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div>

        <div class="form-group form-inline">
            <div class="input-group">
              <span class="input-group-addon" >Data Name</span> 
              <input type="text" class="form-control"  [(ngModel)]="CurrentExportName" placeholder="(Optional) Input data name.">
            </div><!-- /input-group -->
        </div>
  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="onExportClick()" data-dismiss="modal">Export</button>
      </div>
    </div>
  </div>
</div>